<template>
  <div>
    <text-input title="电话" v-model="phoneNum" :required="true" type="number"></text-input>
    <text-input title="价格" unit="万元" v-model="price" type="number" placeholder="面议" :max="10"></text-input>

    <div class="form-row flex-row">
      <span class="title required">标书类型：</span>
      <checker v-model="signType" :items="[
        { '净标': 1 },
        { '期标': 2 },
        { '车带标': 3 }
      ]"></checker>
    </div>

    <div class="form-row flex-row" v-show="signType !== 1">
      <span class="title required">{{ ['', '', '到期', '上牌'][signType] }}时间：</span>
      <div class="date flex-row flex-grow flex-around" @click="openDateSelect">
        <div class="year">{{ date.split('-')[0] }} 年</div>
        <div class="month">{{ date.split('-')[1] }} 月</div>
        <div class="day">{{ date.split('-')[2] }} 日</div>
      </div>
    </div>

    <div class="form-row flex-row">
      <span class="title required">过&emsp;&emsp;户：</span>
      <checker v-model="transfer" :items="[
        { '包过户': 1 },
        { '不包过户': 0 }
      ]"></checker>
    </div>

    <text-input title="备注" v-model="remark"></text-input>

    <div class="theme-btn submitBtn" :class="{ disabled }" @click="submit">我要发布</div>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import TextInput from '@c/form/TextInput'
import Checker from '@c/form/Checker'
import test from '@u/test.js'

function getTodayDateStr (){
  var date = new Date()
  var foo = val => val < 10 ? '0' + val : val
  var today = [date.getFullYear(), foo(date.getMonth() + 1), foo(date.getDate())]
  return today.join('-')
}

export default {
  components: {
    TextInput, 
    Checker,
  },

  data (){
    return {
      phoneNum: this.$store.state.user.data.phonenum || '',   // 电话号码
      price: '',    // 价格
      signType: 1,    // 标书类型
      date: getTodayDateStr(),  // 到期or上牌时间
      transfer: 1,    // 包过户
      remark: '',   // 备注

      loopCheckerKey: 0,
      disabled: true,
    }
  },

  beforeRouteLeave (to, from, next){
    // 离开页面清除字段确认器
    clearInterval(this.loopCheckerKey)
    next()
  },

  activated (){
    // 激活页面时开始每200毫秒确认一次各字段，正确将点亮按钮
    this.loopCheckerKey = setInterval(() => this.disabled = !this.testInput(false), 200)
  },

  methods: {
    // 开启日期选择器
    openDateSelect (){
      this.$vux.datetime.show({
        confirmText: '确认',
        cancelText: '取消',
        onConfirm: val => this.date = val
      })
    },

    // 确认各字段
    testInput (toast = true){
      if(!this.phoneNum.length){
        toast && this.$alert.toast('电话/手机号码不能为空')
        return false
      }
      if(!test.phoneNum(this.phoneNum)){
        toast && this.$alert.toast('请输入正确的电话/手机号码')
        return false
      }
      if(this.price && !test.price(this.price)){
        toast && this.$alert.toast('请输入正确的价格')
        return false
      }

      return true
    },

    submit (){
      if(this.testInput()){
        var request = {
          sign_type: this.signType,
          tel: this.phoneNum,
          price: this.price || 0,
          is_transfer: this.transfer,
          remark: this.remark
        }

        if(this.signType === 2){
          request.expired_at = this.date
        }
        if(this.signType === 3){
          request.license_at = this.date
        }

        _api('sign/publish', request)
        .then(() =>{
          this.$alert.alert('发布成功')
          this.$router.replace({
            name: 'index/home',
            query: { reload: true }
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@sty/publish.less';

.qqmap-container{
  position: fixed;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  background-color: white;
}
</style>